<template>
  <div class="user">
    <div class="box">
        <div class="warp">
            <div class="logo">
                <img src="../assets/jiazhenglogo.png" alt="">
            </div>
            <div class="zhuce">
                <div class="shadow" v-show="shadow">
                    注册成功！2秒后跳转至登录<br>
                    <i class="el-icon-success green"></i>
                </div>
                <div class="buzhou">
                    <el-steps :active="active" align-center>
                        <el-step title="设置账号密码"></el-step>
                        <el-step title="填写个人信息"></el-step>
                        <el-step title="注册成功"></el-step>
                    </el-steps>
                </div>
                <div class="users c">
                    <div v-show="set">
                        <div class="input" style="width:600px">账号：<input type="text" v-model="uid" @blur="uidkong"><span class="tip">账号可以包含数字和字母，并且必须大于等于六位</span>
                            <div class='uidk' v-show="uidk">账号不能为空</div>
                            <div class='uidk' v-show="uidc">账号格式不正确</div>
                        </div>
                        <div class="input" style="width:600px">密码：<input type="password" v-model="password" @blur="passwordkong"><span class="tip">密码可以包含数字和字母，并且必须大于等于六位</span>
                            <div class='uidk' v-show="passwordk">密码不能为空</div>
                            <div class='uidk' v-show="passwordc">密码格式不正确</div>
                        </div>
                        <button class="register" @click="tonews">下一步</button>
                    </div>
                    <div v-show="news">
                        <div class="input">姓名：<input type="text" v-model="name" @blur="namecuo">
                            <div class='uidk' v-show="namek">姓名不能为空</div>
                            <div class='uidk' v-show="namec">姓名必须为2-5位汉字</div>
                        </div>
                        <div class="input">身份证：<input type="text" v-model="id" @blur="idcuo">
                            <div class='uidk' v-show="idk">身份证不能为空</div>
                            <div class='uidk' v-show="idc">身份证格式不正确</div>
                        </div>
                        <div class="input">年龄：<input type="text" v-model="age" class="age" disabled style="border:none">
                        </div>
                        <div class="input">手机号码：<input type="tel" v-model="tel" @blur="telcuo">
                            <div class='uidk' v-show="telk">手机号码不能为空</div>
                            <div class='uidk' v-show="telc">手机号码格式不正确</div>
                        </div>
                        <div class="input" @click="addresscuo">地址：
                            <el-cascader
    
                            size="large"
                        
                            :options="options"
                        
                            v-model="selectedOptions"
                        
                            @change="handleChange">
                        
                            </el-cascader>
                            <div class='uidk1' v-show="addressk">详细住址不能为空</div>
                        </div>
                        <button class="register" @click="toright">确认注册</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import { regionData,CodeToText } from 'element-china-area-data'
export default {
    data(){
        return{
            options: regionData,
 
            selectedOptions: [],
            active: 0,
            uidk:false,
            uidc:false,
            passwordk:false,
            passwordc:false,
            namek:false,
            namec:false,
            idk:false,
            idc:false,
            telk:false,
            telc:false,
            addressk:false,
            securityk:false,
            set:true,
            news:false,
            sign:0,
            shadow:false,
            uid:'',//账号
            password:'',// 密码
            name:'',//姓名
            id:'',//身份证
            age:'',//年龄
            tel:'',//电话
            email:'',//邮箱
            province:'',//省
            city:'',//市
            area:'',//区
            x1:0,
            x2:0,
            x3:0,
            x4:0,
            x5:0,
            x6:0,
            x7:0,
        }
    },
    watch:{
        
    },
    mounted(){
        
    },
    methods:{
        handleChange (value) {
            this.province = CodeToText[value[0]];
            this.city = CodeToText[value[1]];
            this.area = CodeToText[value[2]];
            console.log(this.province);
            console.log(this.city);
            console.log(this.area);
            this.addressk = false
            this.x6 = 1;
            console.log(this.x6);
        },
        tonews(){
            if(this.x1 == 1 && this.x2 == 1){
                this.active = 1
                this.set = false;
                this.news = true
            }else{
                this.$message.error('账号/密码未输入或不符合规范！');
            }
        },
        toright(){
            if(this.x3 == 1 && this.x4 == 1 && this.x5 == 1 && this.x6 == 1){
                this.active = 2
                this.success();
            }else{
                this.$message.error('个人信息填写不完整！');
            }
        },
        uidkong(){
            if(this.uid == ''){
                this.x1 = 0;
                this.uidk = true
                this.uidc = false
            }else{
                this.uidk = false
                var pattern = /^[\w_-]{6,16}$/;
                if(!pattern.test(this.uid)){
                    this.uidc = true
                    this.x1 = 0;
                }else{
                    this.uidc = false;
                    this.x1 = 1;
                    console.log(this.x1);
                }
            }
        },
        passwordkong(){
            if(this.password == ''){
                this.passwordc = false
                this.passwordk = true
                this.x2 = 0;
            }else{
                this.passwordk = false
                var pattern = /^[\w_-]{6,16}$/;
                if(!pattern.test(this.password)){
                    this.passwordc = true
                    this.x2 = 0;
                }else{
                    this.passwordc = false
                    this.x2 = 1;
                }
            }
        },
        namecuo(){
            if(this.name == ''){
                this.namec = false
                this.namek = true
                    this.x3 = 0;
            }else{
                this.namek = false
                var pattern = /^([\u4e00-\u9fa5]){2,5}$/;
                if(!pattern.test(this.name)){
                    this.namec = true
                    this.x3 = 0;
                }else{
                    this.namec = false
                    this.x3 = 1;
                    console.log(this.x3);
                }
            }
        },
        idcuo(){
            if(this.id == ''){
                this.idc = false
                this.idk = true
                this.x4 = 0;
            }else{
                this.idk = false
                var pattern = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
                if(!pattern.test(this.id)){
                    this.idc = true;
                    this.x4 = 0;
                }else{
                    this.idc = false
                    var cccc = this.id.substring(6,10);
                    this.age = 2021 - cccc;
                    this.x4 = 1;
                    console.log(this.x4);
                }
            }
        },
        telcuo(){
            if(this.tel == ''){
                this.telc = false
                this.telk = true
                this.x5 = 0;
            }else{
                this.telk = false
                var pattern = /^\d{11}$/;
                if(!pattern.test(this.tel)){
                    this.telc = true;
                    this.x5 = 0;
                }else{
                    this.telc = false
                    this.x5 = 1;
                    console.log(this.x5);
                }
            }
        },
        addresscuo(){
            if(this.area == ''){
                this.addressk = true
                this.x6 = 0;
            }else{
                this.addressk = false
                this.x6 = 1;
            }
        },
        get(){
            this.$router.push('/about');
        },
        success(){
            if(this.x6==1&&this.x5==1&&this.x4==1&&this.x3==1){
                    // type:1,
                    // uid:'',//账号
                    // password:'',// 密码

                    // id:'',//身份证
                    // age:'',//年龄
                this.myaxios({
                    url:'http://housekeepi.com/api/register',
                    method:'post',
                    data:{
                        type:1,//普通用户
                        name:this.uid,//用户账号
                        pw:this.password,//用户密码
                    }
                }).then((res)=>{
                    var tokencp = res.data.data.token;
                    this.myaxios({
                        url:'http://housekeepi.com/api/userModify',
                        method:'post',
                        data:{
                            token:tokencp,
                            nick_name:this.name,//姓名
                            phone:this.tel,//电话
                            content:this.id,//身份证
                            province:this.province,//省
                            city:this.city,//市
                            area:this.area,//区
                        }
                    }).then((res)=>{},()=>{}).catch(()=>{})
                },()=>{}).catch(()=>{}) //Promise
                this.shadow=true
                this.active = 3
                setTimeout(() => {
                    this.get()
                }, 2000);
            }
        }
    }
}
</script>

<style scoped>
.box{
  width: 100%;
}
.warp{
  position: relative;
  width: 1200px;
  box-sizing: border-box;
  padding: 50px;
  margin: 100px auto 0px;
  background-color: rgb(245, 245, 245);
}
.logo{
  position: absolute;
  top: -100px;
}
.zhuce{
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 20px;
    padding-bottom: 30px;
}
.c{
    padding-top: 20px;
    padding-left: 400px;
    /* text-align: center; */
}
.buzhou{
    padding: 100px;
    padding-bottom: 30px;
    padding-top: 70px;
}
.input{
    position: relative;
    height: 60px;
    font-size: 18px;
}
.input1{
    position: relative;
    padding: 0 20px 20px 0px;
    font-size: 18px;
    line-height: 30px;
}
.input,.input1{
    width: 300px;
    display: flex;
    justify-content: space-between;
}
.input1 input{
    margin-left: 60px;
    margin-right: 5px;
}
.input input{
    width: 200px;
    font-size: 16px;
    text-indent: 10px;
    height: 30px;
    border: 1px solid rgb(230, 230, 230);
}
select{
    margin-left: 50px;
    width: 200px;
    font-size: 16px;
    text-indent: 10px;
    height: 30px;
    border: 1px solid rgb(230, 230, 230);
}
.security{
    width: 200px;
    font-size: 16px;
    text-indent: 10px;
    height: 30px;
    border: 1px solid rgb(230, 230, 230);
}
.tip{
    color: #ccc;
    font-size: 14px;
    margin-left: 10px;
}
.uidk{
  font-size: 14px;
  color: red;
  position: absolute;
  top: 35px;
  left: 0px;
}
.uidk1{
  font-size: 14px;
  color: red;
  position: absolute;
  top: 40px;
  left: 0px;
}
.securityk{
  font-size: 14px;
  color: red;
  position: absolute;
  top: 147px;
  left: 60px;
}
.input .age{
    width: 40px;
    border-radius: 10px;
    background-color: #fff;
}
.register{
    display: block;
    margin-left:100px;
    margin-top: 5px;
    width: 150px;
    height: 30px;
    border: none;
    background-color: rgb(251,240,156);
    font-size: 16px;
    border-radius: 5px;
}
.zhuce .choice .xuanzhong{
    background-color: rgb(251,240,156);
    color: black;
}
.shadow{
    position: fixed;
    z-index: 999;
    width: 440px;
    height: 250px;
    top: 250px;
    left: 50%;
    margin-left: -200px;
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 10px;
    text-align: center;
    font-size: 30px;
    line-height: 100px;
}
.green{
    color: greenyellow;
    font-size: 120px;
}
</style>